<template>
  <div class="main">
    <p class="title">
      <i></i>
      春节回家政策
    </p>
    <div class="home">
      <casca-der :options="options" @getValue='getFrom'/>
      <casca-der :options="options" @getValue='getTo'/>
      <van-button type="info" block @click="go">查询</van-button>
    </div>
  </div>
</template>

<script>
import api from '../api/index'
import CascaDer from '../components/CascaDer.vue'
export default {
  components: {
    CascaDer
  },
  data () {
    return {
      options: [],
      citys: []
    }
  },
  methods: {
    getFrom (data) {
      this.citys.push(data)
    },
    getTo (data) {
      this.citys.push(data)
    },
    go () {
      this.$router.push({ name: 'spring', params: { citys: this.citys } })
    }
  },
  mounted () {
    api.getSpringTravel({
      key: '38122e8fe723fc3ed7c13e07a2a7d669'
    }).then(res => {
      if (res.status === 200) {
        const currentAll = []
        for (let i = 0; i < res.data.result.length; i++) {
          const arr = []
          for (let j = 0; j < res.data.result[i].citys.length; j++) {
            const temp1 = {
              text: res.data.result[i].citys[j].city,
              value: res.data.result[i].citys[j].city_id
            }
            arr.push(temp1)
          }
          const temp2 = {
            text: res.data.result[i].province,
            value: res.data.result[i].province_id,
            children: arr
          }
          currentAll.push(temp2)
        }
        this.options = currentAll
      }
    })
  }
}
</script>

<style lang='scss' scoped>
.main {
  border-top: 1px solid rgba(0, 0, 0, 0.107);
  .home{
  padding: 10px;
  }
  .title {
    padding: 16px;
    font-size: 17px;
    i {
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #4169e2;
      margin-right: 0.1875rem;
      vertical-align: middle;
    }
  }
  .select {
    font-size: 13px;
  }
}
</style>
